<template>
	<scroll-view  class="viewport">
		<view class="card">
			<view class="font-medium">{{bookDes.roomTypeName}}</view>
			<view class="text-sm">
				{{bookDes.roomType?.areaRange}}平方 {{bookDes.roomType?.bedType}} 楼层{{bookDes.roomType?.floorRange}}
				WiFi{{bookDes.roomType?.wifi}} {{bookDes.roomType?.hasWindow?'有窗':'无窗户'}}
				{{bookDes.breakfast ? '含早餐' :'无早餐'}}
			</view>
			<view class="text-sm">
				{{bookDes.roomType.bedType}} * 1张床 * 2米 * 1米 无烟
			</view>
			<view class="text-sm">
				入住: {{formatDate(bookDes.checkIn,'MM月DD日')}} - 离店: {{formatDate(bookDes.checkOut,'MM月DD日')}} |
				{{bookDes.nights}}晚 | {{bookDes.roomType?.maxGuests}}人/间
			</view>
		</view>
		<ContactInfo :contactInfo="contactInfo" :rooms="rooms" />
		<view class="card">
			<view class="card-header flex-justify">特殊要求 <text class="text-blud"
					@click="remarkpopup?.open('bottom')">选填</text></view>
			<view class="text-sm">
				{{Remarks}}
			</view>
		</view>
		<view class="card">
			<view class="card-header">订单提示</view>
			<view class="bg-blue-50">
				<view class="font-medium">提交订单后</view>
				<text>订单提交成功后，您将进入支付页面，可选择多种支付方式完成订单支付。支付完成后，订单将立即生效。</text>
			</view>
		</view>
		<view class="card">
			<view class="card-list">
				<view :class="active==1?'item active':'item'" @click="active=1">取消政策</view>
				<view :class="active==2?'item active':'item'" @click="active=2">房型描述</view>
			</view>
			<view class="text-sm" v-show="active==1">
				<view v-for="item in bookDes.cancelPolicies" :key="item.id">
					从{{formatDate(item.fromTime,'YYYY-MM-DD HH:mm:SS')}}到{{formatDate(item.toTime,'YYYY-MM-DD HH:mm:SS')}}{{item.penaltyAmountDesc}}
				</view>
			</view>
			<view class="text-sm" v-show="active==2">
				{{bookDes.roomType.name}}{{bookDes.roomType?.areaRange}}平方 {{bookDes.roomType?.bedType}}
				楼层{{bookDes.roomType?.floorRange}}
				WiFi{{bookDes.roomType?.wifi}} {{bookDes.roomType?.hasWindow?'有窗':'无窗户'}}<br />
				1.房型：{{bookDes.roomType.areaRange}}<br />
				2.早餐：{{bookDes.breakfast?'含早餐':'无早餐'}}<br />
				3.最多入住：{{bookDes.roomType.maxGuests}}人<br />
				4.楼层：{{bookDes.roomType.maxGuests}}<br />
				5.景观：城市景观<br />
			</view>
		</view>
	</scroll-view>
	<view class="toolbar">
		<!-- <text  @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text> -->
		<text class="amount">￥{{bookDes.totalAmount}} <text class="decimal" @click="popup?.open('bottom')">明细 <text
					class="icon-xiangshang_jiantou" /></text>
		</text>
		<view class="button-grounp">
			<view class="button payment-button" @click="SubmitEvent">提交订单</view>
		</view>
	</view>
	<uni-popup type="bottom" ref="popup">
		<bookingPopup @close="popup?.close()" :bookDes="bookDes"></bookingPopup>
	</uni-popup>
	<uni-popup type="bottom" ref="remarkpopup">
		<Remark @select="select" :List="List"></Remark>
	</uni-popup>
	<view class="toolbar-height"></view>
</template>

<script setup lang="ts">
	import type { book } from '@/types'
	import { getPreOrder, postOrderSubmit,postSpecialRequests } from '@/api/Hotel'
	import { getUser } from '@/api/User'
	import ContactInfo from './components/ContactInfo.vue';
	import guestInfo from './components/guestInfo.vue';
	import { onMounted, ref } from 'vue';
	import { formatDate } from '../../utils';
	import bookingPopup from './components/booking-popup.vue';
	import Remark from './components/Remark.vue';
	const query = defineProps<{
		id ?: string
		queryData ?: any
	}>()
	const popup = ref(null)
	const remarkpopup = ref(null)
	const active = ref(2)
	const bookDes = ref<book>(null)
	const Remarks = ref('')
	const List =  ref([])
	const specialRequests  =  ref([])
	const contactInfo = ref({
		contactPhone: "",
		contactEmail: "",
	})
	const fiterData = uni.getStorageSync('fiterData')
	console.log(fiterData)

	const rooms = ref(Array.from({ length: fiterData.Rooms }, (_, index) => {
		return {
			roomIndex: index + 1,
			adultGuests: fiterData.AdultGuests,
			childrenGuests: fiterData.ChildrenGuests,
			childrenAges: fiterData.ChildrenAges,
			guests: [
				{ firstName: '', lastName: '', isPrimary: true, gender: '' }
			]
		}
	}))
	onMounted(() => {
		initData()
	})
	const initData = async () => {
		const res = await getPreOrder(query.id)
		console.log(res)
		bookDes.value = res.data
		// 初始化联系人信息
		let user = await getUser()
		if (user.data) {
			contactInfo.value.contactName = user.data.name
			contactInfo.value.contactPhone = user.data.phoneNumber
			contactInfo.value.contactEmail = user.data.email
		}
		let data = await postSpecialRequests()
		List.value = data.data
	}
	const select = (arr:any)=>{
		specialRequests.value=arr
		remarkpopup?.value.close()
	}
	const showModal = () => {
		uni.showModal({
			title: '输入特殊要求',
			content: '',
			editable: true,
			success: async (res) => {
				if (res.confirm) {
					Remarks.value = res.content
				}
			},
		})
	}
	const SubmitEvent = async () => {
		if (!contactInfo.value.contactPhone || !contactInfo.value.contactEmail) {
			return uni.showToast({
				title: '请先填写联系信息',
				icon: 'none'
			})
		}
		const Occupants = rooms.value.map(item => {
			return {
				...item,
				guestName: item.guests
					.filter(guest => guest.isPrimary)
					.map(guest => guest.firstName)
					.join(',')
			}
		})
		if (!Occupants.map(item => item.guestName).join(',')) {
			return uni.showToast({
				title: '请填写入住人信息',
				icon: 'none'
			})
		}
		let data = {
			ContactName: contactInfo.value.contactName,
			contactPhone: contactInfo.value.contactPhone,
			contactEmail: contactInfo.value.contactEmail,
			// Rooms: fiterData.Rooms,
			rooms: rooms.value,
			// remarks: Remarks.value[0],
			specialRequests:specialRequests.value,
			preOrderId: bookDes.value.id
		}
		const res = await postOrderSubmit(data)
		console.log(res)
		if (res.data) {
			uni.showToast({
				icon: 'none',
				title: '提交成功'
			})

			uni.navigateTo({
				url: '/pagesOrder/payment/index?orderNo=' + res.data
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: res.data.message
			})
		}
	}
</script>

<style lang="scss" scoped>
	.viewport {
		width: 100vw;
		// height: calc(100vh - 160rpx);
		background-color: #f7f8fa;
		// padding: 20rpx;
	}

	.card-list {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-bottom: 1px solid #eee;

		// padding-bottom: 10rpx;
		.item {
			flex: 1;

			&.active {
				border-bottom: 4rpx solid #007aff;
				color: #007aff;
			}
		}
	}

	.flex-justify {
		display: flex;
		justify-content: space-between;

	}

	.font-medium {
		font-weight: 500;
	}

	.text-sm {
		font-size: 24rpx;
		line-height: 50rpx;
		color: #333;
		letter-spacing: 1px;
	}

	.bg-blue-50 {
		margin: 20rpx 0;
		background-color: #f0f6ff;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.text-blud {
		color: #007aff;
	}

	.tips {
		font-size: 24rpx;
		color: #666;
		line-height: 30rpx;
	}
</style>